<template>
<!-- 党组织活动页面 -->
  <div class="activeList">
      <div>
          <el-select @change="PresentChange" v-model="isPresent" clearable placeholder="我是否参加">
            <el-option v-for="item in pateList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </div>
      <el-table class="activetable" :data="activityList.slice((currentPage-1)*pageSize,currentPage*pageSize)" height="560" border>
        <el-table-column
          prop="theme"
          label="活动主题">
        </el-table-column>
        <!-- <el-table-column
          prop="createUserName"
          label="发起人">
        </el-table-column> -->
        <el-table-column
          prop="compereName"
          label="主持人">
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述" tooltip-effect="is-light"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="地点">
        </el-table-column>
        <el-table-column
          prop="contactsUserName"
          label="联系人">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="holdTime"
          label="开始时间">
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="完成时间">
        </el-table-column>
        <el-table-column
          prop=""
          label="完成状态">
           <template slot-scope="scope">
               <span>{{scope.row.isState}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="" width="226" label="操作">
          <template slot-scope="scope">
            <el-button  @click="activeDues(scope.row.id)">查看详情</el-button>
            <el-button type="primary" @click="complete(scope.row.id)" :disabled="scope.row.isDisable" plain>完成活动</el-button>
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          prop="status"
          label="状态">
        </el-table-column> -->
        <!-- <el-table-column prop="status">
        </el-table-column> -->
      </el-table>
      <div class="paginationBlock">
        <el-pagination  @size-change="handleSizeChange"
         @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
         layout="total,prev, pager, next,jumper" :total="total">
        </el-pagination>
      </div>
      <!-- <activeAdd @activeList="activeList" ref="activeAdd" v-show="showAdd"></activeAdd> -->
      <!-- <showactive ref="actshow" v-show="showactUserlist"></showactive> -->
  </div>
</template>

<script>
// import axios from "axios"
// import showactive from "./activeShow.vue"
// import activeAdd from "./activeAdd.vue"
export default {
//   components:{
//     activeAdd,showactive
//   },
  data(){
    return{
      activityList:[],//活动列表
      showAdd:false,//是否显示新增活动弹窗
    //   showaddButton:true,//是否显示新建活动按钮;普通用户不显示
      total:0,
      currentPage: 1,
      pageSize:4,
      showactUserlist:false,//是否显示查看活动详情弹框
      pateList:[{
        id:0,
        name:"未参加"
      },{
        id:1,
        name:"已参加"
        }
      ],
      isPresent:"",//下拉框选择内容
    }
  },
  mounted(){
    this.activeList()
  },
  methods:{
    activeList(){//获取活动列表
    // console.log("调用刷新")
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        url:`/activity/getJoinActivityList?pageNum=${this.currentPage}&pageSize=${this.pageSize}&isPresent=${this.isPresent}`,
        // url:"/activity/getActivityList",
      }).then(res=>{
        // console.log(res)
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.activityList = res.data.data.list
        this.total = res.data.data.totals
        // console.log(this.activityList)
        this.activityList.forEach(item=>{
            if(item!=null){
                if(item.holdTime!=null){// 截取活动举办时间
                    item.holdTime = item.holdTime.replace(/(\d{4}-\d{2}-\d{2})\s\d{2}:\d{2}:\d{2}/, "$1");
                }
                if(item.createTime!=null){// 截取创建时间时间
                    item.createTime = item.createTime.replace(/(\d{4}-\d{2}-\d{2})\s\d{2}:\d{2}:\d{2}/, "$1");
                }
                if(item.endTime != null){//截取结束时间
                    item.endTime = item.endTime.replace(/(\d{4}-\d{2}-\d{2})\s\d{2}:\d{2}:\d{2}/, "$1");
                    // 向数组中添加字段控制是否禁用按钮
                    item.isState = "已完成"
                }
                else{
                    item.isState = "未完成"
                }
            }
        })
      })
    },
    PresentChange(e){
        this.activeList()
    },
    handleCurrentChange(val){//点击获取页码
      this.currentPage = val
      this.activeList()
      this.currentPage = 1
    },
    handleSizeChange(val) {
      this.pageSize = val
      // this.currentPage = 1
    },
    activeDues(id){//点击查看
      this.showactUserlist = true
        this.$nextTick(()=>{
          this.$refs.actshow.init(id)
      })
    }
  }
}
</script>

<style lang="scss">
  .builtactive{

  }
  .activetable{
    margin-top: 2vh;
    .information{
            cursor: pointer;
        }
        .information:hover{
            color: salmon;
        }
  }
  .has-gutter{
        th{
            text-align: center;
        }
    }
    .el-table__body{
        .el-table__row{
            td{
                text-align: center;
            }
        }
    }
  .activeList{
    .paginationBlock{
      position: absolute;
      bottom: 6vh;
      left: 0;
      width: 100%;
      // border: 1px solid #000;
    }
    .el-pagination{
      text-align: center;
    }
  }
</style>